<template>
  <view class="flex-col page">
    <view class="flex-col">
      <MyHeader title="我的发布"></MyHeader>
      <view class="tab-bottom">
        <u-tabs :itemStyle="{flex:1,height:'88rpx'}" :list="navs" @click="navHandle"></u-tabs>
      </view>
      <view class="flex-col list">
        <view class="flex-col mt-10 list-item" v-for="(item, index) in items" :key="index">
          <view class="flex-row justify-between self-stretch">
            <view class="flex-row items-center">
              <image
                class="shrink-0 image_7"
                src="https://ide.code.fun/api/image?token=6775281b797f850011f50bd4&name=4587f37e75370a7c026e852857322c81.png"
              />
              <view class="flex-col shrink-0 group_5 ml-11">
                <text class="self-start font_2 text_8">杨阳洋</text>
                <text class="self-stretch font_4 text_9 mt-7">2024-12-12 20:30</text>
              </view>
            </view>
            <view class="flex-row items-center self-start group_6">
              <text class="font_3">已出</text>
              <image
                class="ml-18 shrink-0 image_8"
                src="https://ide.code.fun/api/image?token=6775281b797f850011f50bd4&name=75143fcfa52f53ff3d1093bc7398c986.png"
              />
            </view>
          </view>
          <view class="flex-col self-stretch group_7">
            <text class="self-start font_5 text_10">初中英语家教 70/小时</text>
            <text class="self-stretch font_6 text_11">
              要求有一定经验的老师，70一小时，时间周三或周四晚上7点到9点，一对一。
            </text>
          </view>
          <view class="flex-row equal-division">
            <image
              class="image_9 equal-division-item"
              src="https://ide.code.fun/api/image?token=6775281b797f850011f50bd4&name=24ddf9f1bbf5d009f98c1246dea40748.png"
            />
            <image
              class="image_9 equal-division-item ml-7"
              src="https://ide.code.fun/api/image?token=6775281b797f850011f50bd4&name=d477fa5d423d97d67add3b55086dc0db.png"
            />
            <image
              class="image_9 equal-division-item ml-7"
              src="https://ide.code.fun/api/image?token=6775281b797f850011f50bd4&name=9a4805bacb08f1c9fcc0f3709aa853bb.png"
            />
          </view>
          <view class="self-stretch divider"></view>
          <view class="flex-row justify-between group_8 equal-division_2">
            <view class="flex-row items-center">
              <image
                class="shrink-0 image_10"
                src="https://ide.code.fun/api/image?token=6775281b797f850011f50bd4&name=a0694babfa7a4854e33a73339719e04d.png"
              />
              <text class="ml-12 font_7">收藏</text>
            </view>
            <view class="flex-row items-center">
              <image
                class="shrink-0 image_10"
                src="https://ide.code.fun/api/image?token=6775281b797f850011f50bd4&name=d0fbd853fbcc03456f1131c4b0bf9e60.png"
              />
              <text class="ml-12 font_7">联系我</text>
            </view>
          </view>
        </view>
        <!-- 兴趣爱好列表 -->
        <view class="xingqu">
          
        <view class="flex-col group_5 ">
          <view v-for="(item,index) in items" :key="index" class="mt-10 flex-row justify-between items-center section_6">
            <view class="flex-row items-center">
              <image
                class="shrink-0 image_7"
                src="https://ide.code.fun/api/image?token=6775281b797f850011f50bd4&name=73efe0798875f24fa9cde9a44044b758.png"
              />
              <text class="font ml-11">考研交流分享1群</text>
            </view>
            <view class="flex-row" style="margin-left: 100rpx;">
              <view class="flex-col justify-start items-center text-wrapper"><text class="font_2">加群</text></view>
              <view class="ml-12 flex-col justify-start items-center text-wrapper">
                <text class="font_2 text_8">编辑</text>
              </view>
            </view>
          </view>
        </view>
        </view>
      </view>
    </view>
    <view class="section_6 mt-21"></view>
  </view>
</template>

<script setup>
  import {
    reactive, ref
  } from 'vue';
  const navs = reactive([{
      name: '校园墙'
    },
    {
      name: '兼职'
    },
    {
      name: '跑腿'
    },
    {
      name: '物品交易'
    },
    {
      name: '兴趣爱好'
    }
  ]);
 const items = [null,null]
</script>

<style lang="scss" scoped>
  .xingqu {
    .ml-11 {
      margin-left: 22rpx;
    }
    .font {
      font-size: 32rpx;
      font-family: SourceHanSansCN;
      line-height: 29.86rpx;
      color: #333333;
    }
    .group_5 {
      padding: 32rpx 28rpx 0;
    }
    .image_7 {
      border-radius: 12rpx;
      width: 64rpx;
      height: 64rpx;
    }
    .font_2 {
      font-size: 24rpx;
      font-family: SourceHanSansCN;
      line-height: 22.12rpx;
      color: #ffffff;
    }
    .text-wrapper {
      padding: 8rpx 0;
      background-color: #4c8eef;
      border-radius: 20rpx;
      width: 94rpx;
      height: 40rpx;
    }
    .text_8 {
      line-height: 22.22rpx;
    }
    .section_6 {
      padding: 32rpx 28rpx;
      background-color: #ffffff;
      border-radius: 16rpx;
    }
  }
.ml-5 {
  margin-left: 10rpx;
}
.ml-11 {
  margin-left: 22rpx;
}
.mt-7 {
  margin-top: 14rpx;
}
.ml-7 {
  margin-left: 14rpx;
}
.mt-21 {
  margin-top: 42rpx;
}
.page {
  background-color: #f7f8fa;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  background-color: #ffffff;
  border-bottom: solid 2rpx #f0f0f0;
}
.group {
  margin-left: -40rpx;
  width: 810.48rpx;
}
.section_2 {
  margin-left: 40rpx;
  margin-right: 20rpx;
  padding: 36rpx 12rpx 42rpx 34rpx;
  background-image: linear-gradient(180deg, #4c8eef 0%, #84bbd900 100%);
}
.group_2 {
  padding-left: 36rpx;
  padding-right: 16rpx;
}
.text {
  color: #333333;
  font-size: 30rpx;
  font-family: SFProText;
  font-weight: 600;
  line-height: 21.78rpx;
}
.image {
  width: 34rpx;
  height: 22rpx;
}
.image_2 {
  width: 30rpx;
  height: 22rpx;
}
.image_3 {
  width: 48rpx;
  height: 22.66rpx;
}
.group_3 {
  padding: 16rpx 0;
}
.image_4 {
  width: 18rpx;
  height: 34rpx;
}
.pos_2 {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.text_2 {
  color: #333333;
  font-size: 36rpx;
  font-family: SourceHanSansCN;
  line-height: 33.74rpx;
  opacity: 0.9;
}
.section_3 {
  padding: 12rpx 24rpx;
  background-color: #ffffff99;
  border-radius: 50rpx;
  border-left: solid 1rpx #97979733;
  border-right: solid 1rpx #97979733;
  border-top: solid 1rpx #97979733;
  border-bottom: solid 1rpx #97979733;
}
.pos {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.image-wrapper {
  width: 38rpx;
}
.image_6 {
  width: 38rpx;
  height: 14rpx;
}
.section_4 {
  background-color: #33333333;
  width: 1rpx;
  height: 37rpx;
}
.image_5 {
  width: 34rpx;
  height: 34rpx;
}
.group_4 {
  padding-bottom: 24rpx;
}
.font {
  font-size: 32rpx;
  font-family: SourceHanSansCN;
  line-height: 29.54rpx;
  color: #333333;
}
.text_3 {
  line-height: 29.66rpx;
}
.text_4 {
  color: #4c8eef;
}
.text_5 {
  line-height: 29.38rpx;
}
.text_6 {
  line-height: 29.88rpx;
}
.text_7 {
  line-height: 29.44rpx;
}
.section_5 {
  margin-left: 144rpx;
  background-color: #4c8eef;
  width: 56rpx;
  height: 4rpx;
}
.list {
  padding-top: 20rpx;
}
.list-item {
  padding: 28rpx 28rpx 36rpx;
  background-color: #ffffff;
}
.list-item:first-child {
  margin-top: 0;
}
.image_7 {
  border-radius: 50%;
  width: 84rpx;
  height: 80rpx;
}
.group_5 {
  width: 156rpx;
}
.font_2 {
  font-size: 28rpx;
  font-family: SourceHanSansCN;
  line-height: 25.78rpx;
  color: #4c8eef;
}
.text_8 {
  line-height: 25.84rpx;
}
.font_4 {
  font-size: 20rpx;
  font-family: SourceHanSansCN;
  line-height: 25.78rpx;
  color: #cccccc;
}
.text_9 {
  line-height: 24rpx;
}
.group_6 {
  margin-top: 16rpx;
}
.font_3 {
  font-size: 24rpx;
  font-family: SourceHanSansCN;
  line-height: 22rpx;
  color: #365d99;
}
.image_8 {
  width: 26rpx;
  height: 14rpx;
}
.group_7 {
  margin-right: 16rpx;
  margin-top: 12rpx;
}
.font_5 {
  font-size: 32rpx;
  font-family: SourceHanSansCN;
  line-height: 56rpx;
  color: #333333;
}
.text_10 {
  width: 256rpx;
}
.font_6 {
  font-size: 28rpx;
  font-family: SourceHanSansCN;
  line-height: 40rpx;
  color: #4d4d4d;
}
.text_11 {
  margin-top: -8rpx;
}
.equal-division {
  align-self: stretch;
}
.image_9 {
  flex: 1 1 220rpx;
}
.equal-division-item {
  height: 220rpx;
}
.divider {
  margin-top: 20rpx;
  background-color: #e5e5e5;
  height: 1rpx;
}
.group_8 {
  align-self: center;
  margin-top: 20rpx;
}
.equal-division_2 {
  width: 536.56rpx;
}
.image_10 {
  width: 42.6rpx;
  height: 42rpx;
}
.font_7 {
  font-size: 28rpx;
  font-family: SourceHanSansCN;
  line-height: 25.78rpx;
  color: #333333e6;
}
.section_6 {
  background-color: #ffffff;
  height: 68rpx;
}
</style>
